<!--author：颜世圆-->

<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <meta charset="utf-8"/>
    <meta name="viewport" content="width=device-width,initial-scale=1"/>
    <link rel="shortcut icon" th:href="@{/user/img/blog.png}"/>
    <title>My Blog - 用户登录</title>
    <link th:href="@{//cdn.bootcss.com/font-awesome/4.7.0/css/font-awesome.min.css}" rel="stylesheet"/>
    <link th:href="@{//cdn.bootcss.com/bootstrap/3.3.7/css/bootstrap.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{/admin/css/style.min.css}" rel="stylesheet" type="text/css"/>
    <link th:href="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.css}" rel="stylesheet"/>

    <!-- HTML5 Shim and Respond.js IE8 support of HTML5 elements and media queries -->
    <!-- WARNING: Respond.js doesn't work if you view the page via file:// -->
    <!--[if lt IE 9]>
    <script src="https://oss.maxcdn.com/libs/html5shiv/3.7.0/html5shiv.js"></script>
    <script src="https://oss.maxcdn.com/libs/respond.js/1.3.0/respond.min.js"></script>
    <![endif]-->
    <style type="text/css">
        .panel-shadow {
            -moz-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
            -webkit-box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
            box-shadow: 0px 0px 10px 0px rgba(39, 49, 65, 0.1);
        }
        .bg-overlay {
            -moz-border-radius: 6px 6px 0 0;
            -webkit-border-radius: 6px 6px 0 0;
            background-color: rgba(47, 51, 62, 0.3);
            border-radius: 6px 6px 0 0;
            height: 100%;
            left: 0;
            position: absolute;
            top: 0;
            width: 100%;
        }
        .input-border {
            width: 100%;
            border-radius: 40px;
            padding: 20px;
            box-sizing: border-box;
            font-size: 20px;
            font-weight: 200;
        }

        .bg-img > h3 {
            text-shadow: 0px 2px 3px #555;
            color: #cac9c8;
        }


        .box {
            width: 100vw;
            height: 100vh;
            background-color: rgb(29, 67, 89);
        }

        @media (min-width: 767px) {
            .box {
                background-color: rgb(29, 67, 89);
            }
            .box .content {
                width: 85vw;
                height: 90vh;
               background:url("/asset/login_two.png");
                background-size: 90% 100%;
                position: absolute;
                right: 15%;
                top: 50%;
                left: 50%;
                transform: translate(-50%, -50%);
                border-radius: 20px;
                background-color: #fff;
            }
            .box .content .login-wrapper {
                width: 25vw;
                position: absolute;
                right: 15%;
                top: 50%;
                transform: translateY(-50%);
            }
        }

        @media (max-width: 768px) {
            .box .content {
                width: 100vw;
                height: 100vh;
                background-size: 100% 100%;
                display: flex;
                align-items: flex-start;
                justify-content: center;
            }
            .box .content .login-wrapper {
                width: 70%;
                height: 60%;
                padding-top: 15%;
            }
        }
        .box .content .login-wrapper h1 {
            text-align: center;
        }
        .box .content .login-wrapper .login-form .form-item .input-item:focus {
            outline: none;
        }
        .box.content.login-wrapper.login-form.form-item{
            margin: 20px 0;
        }
        .box .content .login-wrapper .login-form .login-btn {
            width: 100%;
            border-radius: 40px;
            color: #fff;
            border: 0;
            font-weight: 100;
            margin-top: 20px;
            cursor: pointer;
        }
        .box .content .login-wrapper .divider {
            width: 100%;
            margin: 20px 0;
            text-align: center;
            display: flex;
            align-items: center;
            justify-content: center;
            border-top: 1px solid #000; /* 设置边框样式 */
            margin: 20px 0; /* 设置上下间距 */
            margin-top: 25px;
        }
        .form-group.text-center.m-t-40 {
            margin-top: 0; /* 移除原先的上边距 */
        }

        .form-group.text-center.m-t-40 .col-xs-12 {
            margin-top: -30px; /* 将按钮的父元素向上移动20像素 */
        }
        .checkbox.checkbox-danger {
            margin-top: -16px; /* 将内容向下移动 10 像素 */
        }
        .form-group {
            margin-bottom: 20px; /* 增加输入框之间的间距为 20px */
        }
        .login-wrapper {
            margin-top: 20px; /* 将整个表单下移 30px */
        }
        .form-container {
            margin-top: -10px; /* 将整个表单下移 30px */
        }
        .blog{
            display: flex;
            justify-content: center;
            align-items: center;
           
        }

    </style>

</head>
<body style="width: 100vw;
    height: 100vh;
    background-color: rgb(29, 67, 89)">

    <div class="box">
        <div class="content">
            <div class="blog">
            <img src="/user/img/blog.png" alt="Blog Image"/>
            </div>
            <div>
                <div class="login-wrapper">
                <h1>B L O G</h1>
                    <div class="login-form">
                        <div class="uname">
                            <span>用户名</span>
                        </div>
                        <form class="form-horizontal m-t-20 " method="post" id="loginForm" onsubmit="return checkForm()">
                            <div class="form-container">
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <input class="input-lg input-border input-item" name="username" type="text" required=""/>
                                    </div>
                                </div>
                                <div class="pass">
                                    <span>密码</span>
                                </div>
                                <div class="form-group">
                                    <div class="col-xs-12">
                                        <input class="input-lg input-border input-item" name="password" type="password" required=""/>
                                    </div>
                                </div>
                            </div>

                            <div class="form-group">
                                <div class="col-xs-12">
                                    <div class="checkbox checkbox-danger">
                                        <input id="checkbox-signup" name="remeber_me" type="checkbox"/>
                                        <label for="checkbox-signup">记住我</label>
                                    </div>
                                </div>
                            </div>
                            <div class="form-group text-center m-t-40">
                                <div class="col-xs-12">
                                    <button class=" btn-lg btn-rounded btn-block w-lg waves-effect waves-light login-btn" style="width: 100%; border-radius: 40px; color: #fff; border: none; font-weight: 100; margin-top: 10px; cursor: pointer; box-shadow: none; background-color: #342e2e;" type="submit">登&nbsp;录</button>
                                </div>
                                <div class="divider">
                                    <span class="line"></span>
                                    <span class="divider-text">其他方式登录</span>
                                    <span class="line"></span>
                                </div>
                            </div>
                        </form>
                    </div>
                </div>
            </div>

        </div>
    </div>

<!-- Main  -->
<script th:src="@{//cdn.bootcss.com/jquery/2.2.3/jquery.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/bootstrap/3.3.7/js/bootstrap.min.js}"></script>
<script th:src="@{//cdn.bootcss.com/limonte-sweetalert2/6.4.1/sweetalert2.min.js}"></script>
<script th:src="@{/admin/js/base.js}"></script>
<script type="text/javascript">
    /*<![CDATA[*/
    var tale = new $.tale();
    function checkForm() {
        tale.post({
            url: '/admin/login',
            data: $("#loginForm").serialize(),
            success: function (result) {
                if (result && result.success) {
                    window.location.href = '/admin/index';
                } else {
                    tale.alertError(result.msg || '登录失败');
                }
            }
        });
        return false;
    }
    /*]]>*/
</script>
</body>
</html>
